<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
<div class="layui-form dolphin-compile user-info-page">
    <div class="user-info">
        <div class="user-avatar-box">
            <img class="user-avatar" th:src="${user.picture}" alt="头像">
            <!--<span class="edit-avatar" th:attr="data-url=@{/userPicture}">修改头像</span>-->
        </div>
        <ul class="detail-info">
            <li>账号：<span th:text="${user.username}" th:title="${user.username}"></span></li>
            <li>昵称：<span th:text="${user.nickname}" th:title="${user.nickname}"></span></li>
            <li>性别：<span th:text="${#dicts.keyValue('USER_SEX', user.sex)}"
                         th:title="${#dicts.keyValue('USER_SEX', user.sex)}"></span></li>
            <li>电话：<span th:text="${user.phone}" th:title="${user.phone}"></span></li>
            <li>邮箱：<span th:text="${user.email}" th:title="${user.email}"></span></li>
        </ul>
    </div>
    <form class="user-edit" th:action="@{/frontend/userInfo}">
        <input type="hidden" name="username" th:value="${user.username}"/>
        <input type="hidden" name="dept" th:value="${user.dept?.id}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="nickname" placeholder="请输入用户昵称" th:value="${user.nickname}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-inline">
                <input class="layui-input"  type="text" name="phone" placeholder="请输入电话号码" th:value="${user.phone}">
            </div>
        </div>
        <div class="layui-form-item " >
            <label class="layui-form-label">邮箱<span style="color:red;font-size:20px;position:relative;top:5px;left:2px;">*</span></label>
            <div class="layui-input-inline">
                <input class="layui-input" id="email" type="text" name="email" placeholder="请输入邮箱" th:value="${user.email}" lay-verify="required|email">
            </div>
            <div class="layui-form-mid layui-word-aux">仅用于留言回复通知，若未收到邮件，请检查邮件垃圾箱。</div>
        </div>
        <div class="layui-form-item" th:if="${user.email == '' || user.email == null }">
            <label class="layui-form-label">验证码<span style="color:red;font-size:20px;position:relative;top:5px;left:2px;">*</span></label>
            <div class="layui-input-inline">
                <input class="layui-input" id="emailCode" type="text" name="emailCode" placeholder="请输入验证码" lay-verify="required"  >
            </div>
            <a class="layui-btn" id="emailCodeBtn">发送</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男" checked><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
                <input type="radio" name="sex" value="2" title="女" th:checked="${user.sex} eq 2"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
            </div>
        </div>
        <!--<div class="layui-form-item layui-form-text">-->
            <!--<label class="layui-form-label">备注</label>-->
            <!--<div class="layui-input-block">-->
                <!--<textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${user.remark}]]</textarea>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item dolphin-finally">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <a class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</a>
        </div>
    </form>
    <!-- 编辑头像面板 -->
    <div class="canvas-panel">
        <img class="canvas-bg"/>
        <div class="canvas-shade"></div>
        <canvas class="canvas-crop"></canvas>
    </div>
    <div class="canvas-group layui-btn-group">
        <button class="upload-close layui-btn layui-btn-primary layui-btn-sm">取消</button>
        <button class="upload-btn layui-btn layui-btn-primary layui-btn-sm">保存</button>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery.mousewheel.min.js}"></script>
<script th:inline="javascript">
    layui.use(['jquery','upload','form','util','laydate'], function () {
        var util = layui.util, laydate = layui.laydate;
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;

        $(".user-edit").on("mousedown", function () {
            $(this).css("opacity", 1);
        });

        /* 修改头像 */
        var image = new Image();
        var panel = $(".canvas-panel");
        var bgImg = $(".canvas-bg");
        var canvas = $(".canvas-crop");

        // 激活或停止移动
        var moveEvent = false;
        var screenX = 0, screenY = 0;
        var moveTop = 0, moveLeft = 0;
        panel.on("mousedown", function (e) {
            screenX = e.screenX;
            screenY = e.screenY;
            moveTop = parseFloat(bgImg.css("top"));
            moveLeft = parseFloat(bgImg.css("left"));
            moveEvent = true;
        });
        panel.on("mouseup", function (e) {
            moveEvent = false;
        });
        panel.on("mousemove", function (e) {
            if (moveEvent) {
                bgImg.css("left", moveLeft + e.screenX - screenX);
                bgImg.css("top", moveTop + e.screenY - screenY);
                renderPanel();
            }
        });
        panel.on("mousewheel", function (event, delta) {
            var dir = delta > 0 ? 'Up' : 'Down';
            var width = parseFloat(bgImg.css("width"));
            var height = parseFloat(bgImg.css("height"));
            if (dir == 'Up') {
                delta = 1;
            } else {
                delta = -1;
            }
            bgImg.css("width", width * (1 + 0.1 * delta));
            bgImg.css("height", height * (1 + 0.1 * delta));
            bgImg.css("left", parseFloat(bgImg.css("left")) - (width * 0.1 / 2) * delta);
            bgImg.css("top", parseFloat(bgImg.css("top")) - (height * 0.1 / 2) * delta);
            renderPanel();
            return false;
        });

        // 渲染画布面板
        function renderPanel() {
            canvas[0].width = 256;
            canvas[0].height = 256;
            var imgScale = image.width / bgImg.width();
            var context = canvas[0].getContext('2d');
            var sx = (bgImg.width() * imgScale / 2) - canvas.width() / 2 * imgScale,
                sy = (bgImg.height() * imgScale / 2) - canvas.height() / 2 * imgScale,
                sw = canvas.width() * imgScale, sh = canvas.height() * imgScale;
            var moveX = panel.width() / 2 - parseFloat(bgImg.css("left")) - bgImg.width() / 2;
            var moveY = panel.height() / 2 - parseFloat(bgImg.css("top")) - bgImg.height() / 2;
            context.drawImage(image, sx + moveX * imgScale, sy + moveY * imgScale, sw, sh, 0, 0, canvas[0].width, canvas[0].height);
        }

        var files = [];
        var uploadInst = upload.render({
            elem: '.edit-avatar'
            , field: 'picture'
            , url: $('.edit-avatar').data('url')
            , exts: 'jpg|png|gif|jpeg'
            , auto: false
            , bindAction: ".upload-btn"
            // 选择文件回调
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    panel.show();
                    $(".canvas-group").show();
                    image.src = result;
                    image.onload = function () {
                        bgImg.attr("src", result);
                        if (bgImg.width() >= bgImg.height()) {
                            bgImg.css("height", canvas.width());
                        } else {
                            bgImg.css("width", canvas.height());
                        }
                        bgImg.css("top", (panel.height() - bgImg.height()) / 2);
                        bgImg.css("left", (panel.width() - bgImg.width()) / 2);
                        renderPanel();
                    }
                });
            }
            , before: function (obj) {
                files = obj.pushFile();
                var index, file;
                for (index in files) {
                    file = files[index];
                }
                var dataurl = canvas[0].toDataURL(file.type, 0.92);
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                files[index] = new File([u8arr], file.name, {type: mime});
            }
            , done: function (res, index) {
                if (res.code == 200) {
                    panel.hide();
                    $(".canvas-group").hide();
                    layer.msg("修改头像成功", {offset: '15px', time: 3000, icon: 1});
                    $(".user-avatar").attr("src", canvas[0].toDataURL());
                    delete files[index];
                } else {
                    layer.msg(res.msg, {offset: '15px', time: 3000, icon: 2});
                }
            }
        });

        // 关闭裁切面板及清空文件
        $(".upload-close").on("click", function () {
            panel.hide();
            $(".canvas-group").hide();
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            $.post('/frontend/userInfo', data.field, function (result) {
                if (result.data == null) {
                    result.data = 'submit[refresh]';
                }
                if (result.code === 200) {
                    layer.msg(result.msg, {offset: '15px', time: 3000, icon: 1});
                    setTimeout(function () {
                        if (result.data === 'submit[refresh]') {
                            parent.location.reload();
                            return;
                        }
                        if (result.data == null) {
                            window.location.reload();
                        } else {
                            window.location.href = result.data
                        }
                    }, 2000);
                } else {
                    layer.msg(result.msg, {offset: '15px', time: 3000, icon: 2});
                }
            });
            return false;
        });
        $('#emailCodeBtn').click(function () {

           if($(this).hasClass('layui-btn-disabled')) {
                return;
            }

            var email = $('#email').val();
            var sReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/;
            if (!sReg.test(email)) {
                $('#email').focus();
                layer.msg("Email格式错误！请重新输入。", {offset: '15px', time: 3000, icon: 1});

                return false;
            }
            $.get('/frontend/emailCode', {to: email}, function (result) {
                if (result.code === 200) {
                    var data = result.data;
                    layer.msg(result.msg, {offset: '15px', time: 3000, icon: 1});
                    layui.data('TimeDate', {
                        key: 'endTime'
                        , value: data.endTime
                    });
                    set60Interval(data.endTime,data.serverTime);
                    $('#emailCodeBtn').attr("disabled", true);
                } else {
                    layer.msg(result.msg, {offset: '15px', time: 3000, icon: 2});
                }
            })

        });
        var localTest = layui.data('TimeDate');
        var endTime = localTest.endTime//结束日期
            , startTime = [[${startTime}]];
        if (endTime && parseInt(startTime) < parseInt(endTime)) {
            set60Interval(endTime,startTime);
         }



    });

    function set60Interval(endTime,startTime) {
      var  t1=setInterval(function () {
            var num = parseInt(endTime) - parseInt(startTime);
            var seconde = parseInt(num / 1000);
            startTime =parseInt(startTime) + 1000;

            $('#emailCodeBtn').html(seconde + '秒');
            $("#emailCodeBtn").attr("disabled", true);
            $("#emailCodeBtn").addClass('layui-btn-disabled');
          if (seconde <= 0) {
                //去掉定时器的方法
                window.clearInterval(t1);
                $('#emailCodeBtn').text('发送');
                $("#emailCodeBtn").removeClass('layui-btn-disabled');
            }

        }, 1000);
    }


</script>
</body>
</html>
